import React from 'react';
import { useAppContext , DELETE_TODOLIST_ITEM , TOGGLE_TODOLIST_ITEM } from './Context';

const List = () => {
    const {state,dispatch} = useAppContext();

    const del = (id) => {
        dispatch({type:DELETE_TODOLIST_ITEM,id:id})
    }

    const toggleItem = (id) => {
        dispatch({type:TOGGLE_TODOLIST_ITEM,id:id})
    }

    return <ul>
        {
            state.list.map(item => (
                <li style={{background:item.done?"red":"#fff"}} key={item.id}>
                    <button onClick={() => toggleItem(item.id)}>√</button>
                    <span style={{textDecoration:item.done?"line-through":"none"}}>{item.title}</span>
                    <button onClick={() => del(item.id)}>X</button>
                </li>
            ))
        }
    </ul>
}

export default List;